<template>
    <!-- 供应商 -->
    <view class="item" @click="goDetail(data.SupplierId)">
        <view class="alliance">
            <image :src="easyGetUserImgUrl(data.Logo)" mode="aspectFill" class="supplier-logo"></image>
            <!-- 供应商列表项start -->
            <view class="center">
                <view class="name">
                    <text class="category-name" v-if="data.CategoryName && settingData.SupplierCategory == 1">{{
                        data.CategoryName
                    }}</text>
                    {{ data.Name }}
                </view>
                <!-- 商家标签 -->
                <view v-if="data.TagsList && settingData.SupplierTag == 1" class="tag-list">
                    <text v-for="(item, index) in data.TagsList" :key="index" class="shopTag">{{ item.Name }}</text>
                </view>
            </view>
            <button v-if="data.OfferStatus == 2">进货</button>
            <button v-if="data.OfferStatus == 0">申请</button>
            <button v-if="data.OfferStatus == 1" class="btn-hollow">{{ data.OfferStatusName }}</button>
            <!-- 供应商表项end -->
        </view>
        <!-- 预展示三个商品 -->
        <view class="product-list">
            <view v-for="(item, index) in data.ProductList" :key="index" class="product-box">
                <image :src="easyGetImgUrl(item.ProductImage)" mode="aspectFill" class="product-img"></image>
                <view class="text-show-line-1 pt-10">{{ item.ProductName }}</view>
                <view v-if="item.IsSupplierAuth" class="price-box">
                    <text>￥</text>
                    {{ item.SaleMinPrice }}
                    <text v-if="item.SaleMinPrice != item.SaleMaxPrice"> 起 </text>
                </view>
                <!-- <view v-else class="color-primary pt-5 fs-30 fw-b">￥***</view> -->
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "supplierItem",
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
        settingData: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            show: false,
        }
    },
    watch: {},
    created() {},
    methods: {
        // 查看店铺详情
        goDetail(id) {
            this.$emit("goDetail", id)
            // if (this.type === 'alliance') {
            //   this.$router.push({
            //     path: '/businessDetail/' + id
            //   })
            // } else if (this.type === 'nearbyStore') {
            //   this.$router.push({
            //     path: '/nearbyStoreDetail/' + id
            //   })
            // }
        },
    },
}
</script>

<style lang="scss" scoped>
.item {
    background: $color-white;
    padding: $app-item-padding;
    margin: $app-item-padding;
    border-radius: 12rpx;
}

.supplier-logo {
    width: 96rpx;
    height: 96rpx;
    border-radius: 8rpx;
}
.category-name {
    font-size: 20rpx;
    padding: 0 8rpx;
    background: #f7b500;
    color: $color-white;
    line-height: 1.5;
    display: inline-block;
    margin-right: 14rpx;
    border-radius: 8rpx;
}

.alliance {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .center {
        max-width: calc(100% - 210rpx);
        min-height: 96rpx;
        box-sizing: border-box;
        padding: 0 10rpx 52rpx;
        flex-grow: 1;
        position: relative;
        padding-left: 20rpx;
    }

    .name {
        font: $font-size-32;
        line-height: 1;
        font-weight: 500;
        padding: 5rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: 1;
    }

    .tag-list {
        position: absolute;
        width: 100%;
        bottom: 0;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        max-height: 42rpx;
    }

    .shopTag {
        font-size: 20rpx;
        line-height: 30rpx;
        height: 32rpx;
        min-width: 100rpx;
        text-align: center;
        color: #f53b1c;
        border-radius: 8rpx;
        border: 1rpx solid currentColor;
        padding: 0 10rpx;
        margin: 0 10rpx 10rpx 0;
    }

    button {
        height: 56rpx;
        line-height: 52rpx;
        font-size: 26rpx;
        padding: 0 30rpx;
        border-radius: 28rpx;
        border: 2rpx solid $app-color-main;
        background: $app-color-main;
        color: #fff;
    }
    .btn-hollow {
        background: $color-white;
        color: $app-color-main;
    }
}

.product-list {
    padding-top: $app-item-padding;
    display: flex;
    align-items: flex-start;
}

.product-box {
    width: calc(33% - 10rpx);
    margin-right: 16rpx;
    flex-shrink: 0;
    flex-grow: 0;

    .product-img {
        width: 208rpx;
        height: 160rpx;
        border-radius: 10rpx;
        margin: 0 auto;
        overflow: hidden;
        object-fit: contain;
    }

    .pt-10 {
        padding-top: 10rpx;
    }

    .price-box {
        color: $app-color-main;
        padding-top: 5rpx;
        font-size: $font-size-32;
        font-weight: bold;

        text {
            color: currentColor;
            font-size: 28rpx;
        }

        .fs-20 {
            font-size: 20rpx;
        }
    }
}
</style>
